<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="author" content="www.yanshisan.cn" />
    <meta name="robots" content="all" />
    <title>博噔</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="css/master.css" />
    <link rel="stylesheet" href="css/gloable.css" />
    <link rel="stylesheet" href="css/nprogress.css" />
    <link rel="stylesheet" href="css/message.css" />
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">Ruchsky</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a href="diary.html">日记</a></li>
                    </ul>
                </nav>
                <a href="#" class="blog-user">
                    <i class="fa fa-qq"></i>
                </a>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
    <div class="container-inner">
        <section class="msg-remark">
            <h1>图片版</h1>
            <p>
                图片记录
            </p>
        </section>
        {{/*<div class="textarea-wrap message" id="textarea-wrap">
            <form class="layui-form blog-editor" enctype="multipart/form-data" action="/edit_diary" method="post">
                <div class="layui-form-item">
                    <input type="password" name="token" style="border: solid #C2BE9E" lay-verify="required" id="token" placeholder="输入token才能提交" class="layui-text" />
                </div>
                <div class="layui-form-item">
                    <input type="file" name="file" id="file" accept="*" /> <br />
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" lay-submit="formLeaveMessage" lay-filter="formLeaveMessage">提交图片</button>
                </div>
            </form>
        </div>*/}}

        <table class="layui-table">
            {{ range . }}
                <tr>
                    {{ range .PicImgSrc}}
                        <th class="layui-table-cell">
                            <div onclick="show_img(this)"><img src="{{ . }}" height="100" width="200"></div>
                        </th>
                    {{ end }}
                </tr>
            {{ end }}
        </table>
    </div>
    <div class="f-cb"></div>
</div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <div class="contact">
                        <a href="https://github.com/hujianMr" class="github" target="_blank" title="github"><i class="fa fa-github"></i></a>
                        <a href="https://wpa.qq.com/msgrd?v=3&uin=847562597&site=qq&menu=yes" class="qq" target="_blank" title="847562597"><i class="fa fa-qq"></i></a>
                        <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=hjj2ee@foxmail.com" class="email" target="_blank" title="hjj2ee@foxmail.com"><i class="fa fa-envelope"></i></a>
                        <a href="https://gitee.com/ruchsky" class="fa-gitlab" title="gitee"><i class="fa fa-gitlab"></i></a>
                    </div>
                    <p class="mt05">
                        Copyright &copy; 2019-2020 博登 &copy;All Rights Reserved V.1.0.0 赣ICP备20001171号
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script src="layui/layui.js"></script>
    <script src="js/yss/gloable.js"></script>
    <script src="js/plugins/nprogress.js"></script>
    <script>NProgress.start();</script>
    <script src="js/pagemessage.js"></script>
    <script>NProgress.start();</script>
    <script src="js/"></script>
    <script type="text/javascript">
        window.onload = function () {
            NProgress.done();
        };
    </script>
    <script type="text/javascript">
        function show_img(t) {
            var $ = layui.jquery;
            var t = $(t).find("img");
            //页面层
            /*layer.open({
                type: 1,
                title: '区域图片',
                skin: 'layui-layer-rim', //加上边框
                area: ['80%', '80%'], //宽高 t.width() t.height()
                shadeClose: true, //开启遮罩关闭
                end: function (index, layero) {
                    return false;
                },
                content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" ></div>'
            });*/
            var imgHtml = "<img src='" + $(t).attr('src') + "' width='470px' height='450px'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [470 + 'px',500+'px'],  // area: [width + 'px',height+'px']  //原图显示
                shadeClose:true,
                scrollbar: false,
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }
    </script>
</body>
</html>
